<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日历</title>
    <style>
        td {
            width: 50px;
        }

        th {
            background-color: beige;
        }

        table {
            padding: 0 20px;
            float: left;
        }
    </style>
</head>

<body>
    <script type="text/javascript">
        var todayDate = new Date();
        var thisYear = todayDate.getFullYear();
        var thisMonth = todayDate.getMonth();
        var thisDate = todayDate.getDate();
        var thisDay = todayDate.getDay();
        var beginAt = thisDate;
        while (beginAt > 7) {
            beginAt -= 7;
        }
        beginAt = thisDay - beginAt + 1;
        if (beginAt < 0) {
            beginAt += 7;
        }
        var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
        if (((thisYear % 4 == 0) && !(thisYear % 100 == 0)) || (thisYear % 400 == 0)) {
            monthDays[1] += 1;
        }
        var table = document.createElement("table");
        var titleTr = document.createElement("tr");
        var titleTh = document.createElement("th");

        titleTh.setAttribute("colspan", "7");
        titleTh.innerHTML = thisYear + "年" + (thisMonth + 1) + "月";

        titleTr.appendChild(titleTh);
        table.appendChild(titleTr);
        document.body.appendChild(table);
        function createTd(v) {
            var tempTd = document.createElement("td");
            tempTd.innerHTML = v;
            return tempTd;
        }
        function createTr(v1, v2, v3, v4, v5, v6, v7) {
            var tempTr = document.createElement("tr");
            tempTr.appendChild(createTd(v1));
            tempTr.appendChild(createTd(v2));
            tempTr.appendChild(createTd(v3));
            tempTr.appendChild(createTd(v4));
            tempTr.appendChild(createTd(v5));
            tempTr.appendChild(createTd(v6));
            tempTr.appendChild(createTd(v7));
            return tempTr;
        }
        function createCalendar(beginAt, dayperMonth) {
            var dayInMonth = new Array();
            for (var i = 0; i < beginAt; i++) {
                dayInMonth.push("");
            }
            for (var j = 1; j <= dayperMonth; j++) {
                if (thisDate == j) {
                    dayInMonth.push("<font color='red'>" + j.toString() + "</font>");
                } else {
                    dayInMonth.push(j.toString());
                }
            }
            if (dayInMonth.length > 28 && dayInMonth.length <= 35) {
                var nums = 35 - dayInMonth.length;
                for (var k = 0; k < nums; k++) {
                    dayInMonth.push("");
                }
            }
            if (dayInMonth.length > 35 && dayInMonth.length <= 42) {
                var nums = 42 - dayInMonth.length;
                for (var k = 0; k < nums; k++) {
                    dayInMonth.push("");
                }
            }
            while (dayInMonth.length > 0) {
                table.appendChild(createTr(dayInMonth.shift(), dayInMonth.shift(), dayInMonth.shift(),
                    dayInMonth.shift(), dayInMonth.shift(), dayInMonth.shift(), dayInMonth.shift()));
            }
        }
        table.appendChild(createTr("日", "一", "二", "三", "四", "五", "六"));
        createCalendar(beginAt, monthDays[thisMonth]);
    </script>
</body>

</html>l